<template>
  <!-- 就诊人静态结构 -->
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>就诊人管理</span>
        <el-button class="button" type="success" :icon="User" @click="addUser">添加就诊人</el-button>
      </div>
    </template>
    <!-- 就诊人管理卡片 -->
    <div class="visitors" v-if="scene == 0">
      <visitor @changeScence="changeScene" @removeUser="removeUser" class="card" v-for="(user, index) in userArr" :key="user.id" :user="user"
        :index="index" />
    </div>
    <!-- 添加就诊人展示页面 -->
    <div class="form" v-if="scene == 1">
      <el-divider content-position="left">就诊人信息</el-divider>
      <el-form style="width:60%;margin: 10px auto;">
        <el-form-item label="用户姓名">
          <el-input placeholder="请输入用户姓名" v-model="userParams.name"></el-input>
        </el-form-item>
        <el-form-item label="证件类型">
          <el-select placeholder="请选择证件类型" style="width: 100%;" v-model="userParams.certificatesType">
            <el-option  v-for="item in certationArr" :key="item.id" :label="item.name" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="证件号码">
          <el-input placeholder="请输入证件号码" v-model="userParams.certificatesNo"></el-input>
        </el-form-item>
        <el-form-item label="用户性别">
          <el-radio-group  v-model="userParams.sex">
            <el-radio :label='1'>男</el-radio>
            <el-radio :label='0'>女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="出生日期">
          <el-date-picker type="date" placeholder="请选择日期" vule-format="YYYY-MM-DD" v-model="userParams.birthdate"/>
        </el-form-item>
        <el-form-item label="手机号码" >
          <el-input placeholder="请输入手机号码" v-model="userParams.phone"></el-input>
        </el-form-item>
      </el-form>
      <el-divider content-position="left">建档信息 (完善后部分医院首次就诊不排队建档)</el-divider>
      <el-form style="width:60%;margin: 10px auto;">
        <el-form-item label="婚姻状况">
          <el-radio-group v-model="userParams.isMarry">
            <el-radio :label='1'>未婚</el-radio>
            <el-radio :label='0'>已婚</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="自费/医保" >
          <el-radio-group v-model="userParams.isInsure">
            <el-radio :label='1'>自费</el-radio>
            <el-radio :label='0'>医保</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="当前住址">
          <el-cascader :props="props" v-model="userParams.addressselected"/>
        </el-form-item>
        <el-form-item label="详细地址">
          <el-input placeholder="请输入" v-model="userParams.address"></el-input>
        </el-form-item>
      </el-form>
      <el-divider content-position="left">联系人信息 (选填)</el-divider>
      <el-form  style="width:60%;margin: 10px auto;" label-width="80">
        <el-form-item label="用户姓名">
          <el-input placeholder="请输入用户姓名" v-model="userParams.contactsName"></el-input>
        </el-form-item>
        <el-form-item label="证件类型">
          <el-select placeholder="请选择证件类型" style="width: 100%;" v-model="userParams.contactsCertificatesType">
            <el-option  v-for="item in certationArr" :key="item.id" :label="item.name" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="证件号码">
          <el-input placeholder="请输入证件号码"  v-model="userParams.contactsCertificatesNo"></el-input>
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input placeholder="请输入手机号码"  v-model="userParams.contactsPhone"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="default" @click="submit"> 提交</el-button>
          <el-button size="default" @click="reset"> 重写</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-card>
</template>

<script lang="ts" setup>
import { ElMessage, type CascaderProps } from 'element-plus'
import { User } from '@element-plus/icons-vue';
import { reqGetVisito} from "../../../api/hospital";
import { reqCertation ,reqCity,reqAddOrUpdata } from "../../../api/user";
import type { UserResponseData, UserArr } from '../../../api/hospital/type'
import type { CertationTypeResponseData,CertationArr,AddOrUpdateUser } from "../../../api/user/type";
import { onMounted, reactive, ref,watch } from "vue";
import { useRouter,useRoute } from 'vue-router';
// 存储全部就诊人的信息
let userArr = ref<UserArr>([]);
// 存储就诊人展示状态
let scene = ref<number>(0);
// 存储证件类型数据
let certationArr = ref<CertationArr>([]);
// 新增就诊人数据
let userParams = reactive<AddOrUpdateUser>({
  id: undefined,
  name: '',
  certificatesType: '',
  certificatesNo:'',
  sex: 0,
  birthdate:'',
  phone:'',
  isMarry : 0,
  isInsure : 0,
  addressselected :[],
  address : '',
  contactsName : '',
  contactsCertificatesType: '',
  contactsCertificatesNo: '',
  contactsPhone: ''
})
let $route = useRoute();
let $router = useRouter();

// 组件挂载完毕获取一次就诊人的信息
onMounted(() => {
  // 获取就诊人信息
 getAllUser();
  // 获取证件类型
 getCertationType();
  if ($route.query.type=='add') {
    scene.value = 1;
  }
  if ($route.query.type=='edit') {
    scene.value = 1;
  }
})
// 获取全部就诊人信息
const getAllUser = async () => {
  let result: UserResponseData = await reqGetVisito();
  if (result.code == 200) {
    userArr.value = result.data
  }
}
// 添加就诊人
const addUser = () => {
  // 展示添加界面
  scene.value = 1;
}
// 清空表单数据
const reset = () =>{
  Object.assign(userParams,{
  name: '',
  certificatesType: '',
  certificatesNo:'',
  sex: 0,
  birthdate:'',
  phone:'',
  isMarry : 0,
  isInsure : 0,
  addressselected :[],
  address : '',
  contactsName : '',
  contactsCertificatesType: '',
  contactsCertificatesNo: '',
  contactsPhone: ''
  })
}
// 就诊人子组件自定义事件的回调
const changeScene = (user:AddOrUpdateUser) => {
  scene.value = 1;
  // 收集已有就诊人信息
  Object.assign(userParams,user);
}
// 获取证件类型
const getCertationType=async()=>{
 let result:CertationTypeResponseData =  await reqCertation();
 if (result.code==200) {
    certationArr.value = result.data;
 }
}
// 级联选择器
const props:CascaderProps = {
  lazy:true, //懒加载
  // 级联选择器的数据的方法
  async lazyLoad(node:any, resolve) {
   let result:any = await reqCity( node.data.id||"86");
  //  整理数据
  let showData = result.data.map(((item:any)=>{
    return{
      id:item.id,
      label:item.name,
      value:item.value,
      leaf:!item.hasChildren
    }
  }))
  // 注入组件需要的数据
  resolve(showData);
  },
}

// 提交按钮方法的回调
const submit = async() =>{
  // 新增就诊人或者更新就诊人
  try {
    await reqAddOrUpdata(userParams)
    ElMessage({
      type:'success',
      message:userParams.id?'更新成功':'新增成功'
    })
        // 获取全部就诊人信息
        getAllUser();
    // 判断提交按钮的是不是从预约挂号而来
    if ($route.query.type) {
      $router.back();
    } else {
      // 切换场景为0
    scene.value = 0;
    }

  } catch (error) {
    ElMessage({
      type:'error',
      message:userParams.id?'更新失败':'新增失败'
    })
  }
}
// 监听全部就诊人的数据
watch(
  ()=> userArr.value,
  ()=>{
    if ($route.query.type=='edit') {
      let users = userArr.value.find((item:any)=>{
        return item.id == $route.query.id;
        
      });
      Object.assign(userParams,users);
    }
  }
)
// 子组件自定义事件：删除按钮触发
const removeUser = () =>{
  // 再次获得全部就诊人信息
  getAllUser();
}
</script>

<style lang="scss" scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.visitors {
  display: flex;
  flex-wrap: wrap;

  .card {
    width: 32%;
    margin: 10px 5px;
  }
}
</style>